#{extends 'mobile.html' /} #{set title: 'O! - Ranking' /}
#{set 'moreStyles'}
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
#{/set}
<div data-role="header" data-theme="d">
<h1>Ranking geral</h1>
</div>
<table class="table table-stripe ui-body-d ui-bar-d" data-column-btn-text="Colunas"  data-role="table"  data-mode="columntoggle" class="ui-responsive table-stroke">
	<thead>
		<th >#</th>
		<th >Nome</th>
		<th >Vitórias</th>
		<th >Empates</th>
		<th >Derrotas</th>
		<th >Desistências</th>
		<th >Pontos</th>
	</thead>
	<tbody>
		#{list items:jogadores, as:'jogador'}
		<tr>
			<td>${jogador_index}</td>
			<td><a href="@{Application.jogador()}/${jogador.id}">${jogador.nome}</a></td>
			<td>${jogador.vitorias}</td>
			<td>${jogador.empates}</td>
			<td>${jogador.derrotas}</td>
			<td>${jogador.desistencias}</td>
			<td>${jogador.pontuacao}</td>
		<tr>#{/list}
	</tbody>
</table>